<template>
  <color-header height="900rpx" page-color="#fff">
    <image class="mine-bg" src="/static/images/mine-bg.png" mode="aspectFill"></image>
  </color-header>
  <uni-nav-bar clear-float status-bar background-color="transparent" :border="false"></uni-nav-bar>
  <view class="mine-wrapper">
    <view class="avatar-wrapper">
      <image class="avatar" :src="userStore.userInfo.avatar || '/static/images/logo.png'" mode="aspectFill"></image>
      <view class="right-wrapper">
        <view class="user-info" @click="login">
          <view class="name">{{ userStore.userInfo.name || '登录/注册' }}</view>
          <uni-icons type="right" :size="18" color="#333"></uni-icons>
        </view>
        <view class="right-bottom" v-if="userStore.islogin">
          <view class="pet-auth-filled shop-auth-wrapper" v-if="userStore.userInfo?.merchant_cert_status == 2"
            @click="$navTo('/pages/mine/shopInfo')">
            <image class="auth-icon-filled" src="/static/icons/shop-auth.svg" mode=""></image>
            <text>SeeWow认证商户</text>
          </view>
          <view class="pet-auth" v-if="userStore.userInfo?.pet_cert_status != 2">
            <text class="" v-if="userStore.userInfo?.pet_cert_status == 1">宠物认证审核中...</text>
			<text class="auth-text" v-if="userStore.userInfo?.pet_cert_status == 3" @click.stop="petAuth()">上传宠物安全认证资料</text>
            <image class="auth-icon" src="/static/icons/auth.svg" mode="" v-if="userStore.userInfo?.pet_cert_status == 3"></image>
          </view>
          <view class="pet-auth-filled" v-if="userStore.userInfo?.pet_cert_status == 2">
            <image class="auth-icon-filled" src="/static/icons/auth-filled.svg" mode=""></image>
            <text>宠物安全认证</text>
          </view>
        </view>
      </view>
    </view>

    <view class="jiebei-wrapper" v-if="userStore.islogin">
      <view class="info">
        <view class="left">
          <text class="name">我的街贝</text>
          <view class="nums-wrapper">
            <text class="nums">{{ userStore.userInfo.jb_num || 0 }}</text>
            <text class="note">街贝</text>
          </view>
        </view>
        <view class="right" @click="openApp">
          <text>街贝换好物</text>
        </view>
      </view>
      <view class="withdraw-wrapepr">
        <view class="left">
          <text class="title">我的收益</text>
          <text class="note">¥{{userStore.userInfo.total_money || 0}}</text>
        </view>
        <view class="right" @click="checkProfit">
          <text class="title">{{ withdraw_text }}</text>
          <uni-icons type="right" :size="16" color="#fff"></uni-icons>
        </view>
      </view>
    </view>
  </view>
  <view class="list-wrapper" v-if="userStore.islogin">
	  <image class="my-cwdn" src="https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/my-cwdn.png" @click="cwdn" ></image>
    <!-- <image class="trangle" src="/static/images/trangle.svg" mode="widthFix"></image> -->
    <view class="list">
      <u-list-item title="我要发起活动" title-weight="500" :show-arrow="true" :show-border="false"
        @click="$navTo('/pages/publish/index')"></u-list-item>
      <u-list-item title="我发起的活动" title-weight="500" :show-arrow="true" :show-border="false"
        @click="$navTo('/pages/mine/activityByMe')"></u-list-item>
      <u-list-item title="已报名的活动" title-weight="500" :show-arrow="true" :show-border="false"
        @click="$navTo('/pages/mine/appliedActivity')"></u-list-item>
      <u-list-item title="已收藏的活动" title-weight="500" :show-arrow="true" :show-border="false"
        @click="$navTo('/pages/mine/likedActivity')"></u-list-item>
      <u-list-item title="订单管理" title-weight="500" :show-arrow="true" :show-border="false"
        @click="$navTo('/pages/mine/orderManage')"></u-list-item>
	 <u-list-item title="福利券" title-weight="500" :show-arrow="true" :show-border="false"
		  @click="$navTo('/pages/mine/reward')"></u-list-item>
      <u-list-item title="官方客服咨询" title-weight="500" :show-arrow="true" :show-border="false"
        @click="$navTo('/pages/mine/service')"></u-list-item>
      <u-list-item title="消息通知" title-weight="500" :show-arrow="true" :show-border="false"
        @click="$navTo('/pages/mine/message')"></u-list-item>
      <u-list-item title="免责申明" title-weight="500" :show-arrow="true" :show-border="false"
        @click="$navTo('/pages/mine/statement')"></u-list-item>
      <u-list-item title="商户认证" title-weight="500"
        :note-color="(userStore.userInfo.merchant_cert_status==3 || userStore.userInfo.merchant_cert_status==1)?'#dd524d':'#00CAC0'" :show-arrow="true"
        :show-border="false" @click="shopAuth()" :note="userStore.userInfo.merchant_cert_status == 1 ? '审核中' : '' ">
	  </u-list-item>
    </view>
  </view>

  <view class="empty-img" v-if="!userStore.islogin">
    <image class="mine-empty" src="/static/images/mine-empty.png" mode="widthFix"></image>
    <view class="mine-empty-text">{{ `登录See Wow，\n带给你人宠友好社交新体验` }}</view>
  </view>

</template>

<script>
	import { useUserStore } from '../../store/userStore'
	import config from '@/network/config.js'
	export default {
		data() {
			return {
				userStore: useUserStore(),
			}
		},
		computed: {
			withdraw_text() {
				const { merchant_cert_status, user_cert_status } = this.userStore.userInfo
				if (merchant_cert_status != 2 && user_cert_status != 2) {
					return '开启提现功能'
				} else {
					return '查看明细'
				}
			}
		},
		onLoad() {
			uni.$on('updateUserInfo', () => {
				this.userStore.getUserInfo()
			})
/* 			uni.$on('loginSuccess', () => {
				this.userStore.getUserProfit()
			}) */
		},
		onReady() {
			if (this.userStore.islogin) {
				this.userStore.getUserInfo()
				// this.userStore.getUserProfit()
			}
		},
		onUnload() {
			uni.$off('updateUserInfo')
			uni.$off('loginSuccess')
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '刷新中',
				mask: true
			})
			this.userStore.getUserInfo()
			// this.userStore.getUserProfit()
			setTimeout(() => {
				uni.hideLoading()
				uni.stopPullDownRefresh()
			}, 800)
		},
		methods: {			
			login() {
				if (this.userStore.islogin) {
					uni.navigateTo({
						url: '/pages/mine/profile'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			openApp() {
				//const url = `${config.x5jWeb}/?page=streetCoinTaskPage`
				const url = 'https://m.ix5j.cn/exchange/list.html';
				uni.navigateTo({
					url: '/pages/webview/index?url=' + url
				})
				return
				uni.showToast({
					title: '功能开发中，敬请期待！',
					icon: 'none'
				})
			},
			petAuth() {
				uni.navigateTo({
					url: '/pages/mine/petAuth'
				})
			},
			shopAuth() {
				if (this.userStore.userInfo.merchant_cert_status == 3) {
					uni.navigateTo({
						url: '/pages/mine/shopAuth?isEdit=1'
					})
				} else if (this.userStore.userInfo.merchant_cert_status == 2) {
					uni.navigateTo({
						url: '/pages/mine/shopInfo'
					})
				} else if (this.userStore.userInfo.merchant_cert_status == 1) {
					return
				} else {
					uni.navigateTo({
						url: '/pages/mine/shopAuth'
					})
				}
			},
      // 查看收益
      checkProfit() {
				const { merchant_cert_status, user_cert_status } = this.userStore.userInfo
				if (merchant_cert_status != 2 && user_cert_status != 2) {
					uni.showModal({
						title: '欢迎来到See Wow小程序！', // 弹窗标题
						content: '在开始体验前，为确保您能顺畅查看已购套餐、完成线下核销等必要功能，我们需要您先授权登录，请放心，我们始终将您的隐私和使用体验放在首位；'+'\r\n\n'+ '🔒 严格保护隐私：您的个人信息仅用于小程序功能实现，不会向商家或其他第三方提供。\r\n\n 🛍️ 便捷管理：登录后可随时查询订单、核销权益，不错过任何宠物友好福利！\r\n\r\n 点击下方按钮快速授权，马上开启您和爱宠的专属旅程吧～ ✨', // 弹窗内容
						showCancel: true, // 是否显示取消按钮
						cancelText: '取消', // 取消按钮的文字，默认为"取消"
						cancelColor: '#000000', // 取消按钮的文字颜色
						confirmText: '确认授权', // 确认按钮的文字，默认为"确定"
						confirmColor: '#3CC51F', // 确认按钮的文字颜色
						success: function (res) {
							if (res.confirm) {
								// 用户点击了确定按钮
								uni.navigateTo({
								  url: '/pages/mine/profit/personalAuth'
								})
							} else if (res.cancel) {
							}
						}
					});
				} else {
					uni.navigateTo({
					  url: '/pages/mine/profit/index'
					})
				}
      },
		modifyPetInfo() {
				uni.navigateTo({
					url: '/pages/mine/petAuth?isEdit=1'
				})
			},
		cwdn() {
				uni.navigateTo({
					url: '/pages/cwdn/index'
				});
			},
		
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F1F6F7;
	}
</style>
<style scoped lang="scss">
	.empty-img {
		position: relative;
		z-index: 10;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 240rpx;
		.mine-empty {
			width: 380rpx;
		}
		.mine-empty-text {
			text-align: center;
			white-space: pre-line;
			word-wrap: break-word;
			color: #999;
			margin-top: 32rpx;
		}
	}
	.mine-bg {
		width: 100%;
		height: 900rpx;
	}
	.mine-wrapper {
		position: relative;
		z-index: 1;
		padding: 24rpx 40rpx 0;
		
		.avatar-wrapper {
			display: flex;
			align-items: center;
			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				background-color: #f6f6f6;
				border: 1px solid #fff;
			}
			.right-wrapper {
				padding-left: 24rpx;
				width: calc(100% - 120rpx);
				
				.right-bottom {
					display: flex;
					align-items: center;
					
					.pet-auth {
						margin-top: 18rpx;
						display: flex;
						align-items: center;
						font-size: 24rpx;
						pointer-events: none;
						.auth-text {
							text-decoration: underline;
							color: #666;
							pointer-events: auto;
						}
						.error-color {
							color: $uni-color-error;
						}
						.auth-icon {
							width: 32rpx;
							height: 32rpx;
							margin-left: 8rpx;
						}
					}
					.pet-auth-filled {
						color: #666;
						// width: 212rpx;
						padding: 0 12rpx;
						margin-top: 12rpx;
						font-size: 24rpx;
						display: flex;
						align-items: center;
						height: 52rpx;
						border-radius: 26rpx;
						padding: 0 8rpx;
						background-color: #F9F7F8;
						border: 2rpx solid #EDEDED;
						.auth-icon-filled {
							width: 36rpx;
							height: 36rpx;
							margin-right: 8rpx;
						}
					}
					.shop-auth-wrapper {
						margin-right: 16rpx;
					}
				}
				
			}
			.user-info {
				display: flex;
				align-items: center;
				
				.name {
					font-size: 32rpx;
					font-weight: 500;
				}
			}
		}
		.jiebei-wrapper {
			background: linear-gradient(45deg,#08C0CC 40%,#4DE2D2,#E7E0FD);
			border-radius: 20rpx 20rpx 0 0;
			margin-top: 30rpx;
			padding: 0 30rpx;
			color: #fff;
			// height: 168rpx;
			.info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32rpx 0 24rpx;
        .left {
					display: flex;
					flex-direction: column;
			
					.name {
						font-size: 24rpx;
						font-weight: 500;
					}
			
					.nums-wrapper {
						margin-top: 4rpx;
						display: flex;
						align-items: center;
			
						.nums {
							color: #fff;
							font-size: 48rpx;
							font-weight: 500;
						}
			
						.note {
							font-size: 24rpx;
							padding-left: 8rpx;
						}
					}
				}
        
				.right {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-weight: 500;
					color: #666;
					width: 220rpx;
					height: 64rpx;
					background: linear-gradient(to right, #DFFF88, #6BFAFF);
					border-radius: 32rpx;
					font-size: 28rpx;
					color: #235759;
					border: 1px solid #fff;
				}
			}
			

      .withdraw-wrapepr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24rpx 0 32rpx;
        border-top: 1px solid rgba($color: #fff, $alpha: 0.5);

        .left {
          display: flex;
          align-items: center;
          .title {
            font-size: 24rpx;
            padding-right: 16rpx;
          }
          .note {
            font-size: 40rpx;
            color: #fff;
            font-weight: 500;
          }
        }
        .right {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          .title {
            padding-right: 8rpx;
          }
        }
      }
		}
	}
	.list-wrapper {
		position: relative;
		overflow: hidden;
		z-index: 2;
		background-color: #fff;
		// margin-top: -50rpx;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;
		.list {
			position: relative;
			margin-top: -12rpx;
			background-color: #fff;
			padding: 12rpx 30rpx 12rpx;
		}
		.trangle {
			width: 100%;
		}
		.my-cwdn {
			display: block;
			width: 686rpx;
			height: 158rpx;
			background: #fff;
			border-radius: 20rpx;
			margin:0 auto;
			margin-top:20rpx;
		}
	}

</style>